<template>
  <div>
    <slot name="arealist"></slot>

    <BasicTable class="mb-[20px]" @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'feesAttach'">
          <div class="file-item" v-for="(item, index) in record.fileList" :key="index">
            <preview-btn :fileUrl="item.fileUrl" :fileName="item.fileName" :showName="true" />
            <file-download-btn :fileUrl="item.fileUrl" :fileName="item.fileName" />
          </div>
        </template>
      </template>
    </BasicTable>

    <div>
      <p>费用说明：</p>
      <p>{{ info.remark }}</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import {} from '@ant-design/icons-vue';
  import {} from 'ant-design-vue';
  import { BasicTable, useTable } from '@/components/Table';
  import PreviewBtn from '@/components/common/PreviewBtn.vue';
  import FileDownloadBtn from '@/components/common/FileDownloadBtn.vue';
  // import { FileLabelEnum } from '@/enums/fileLabelnum';
  // import { fileListProps } from '@/components/Upload/src/props';
  // import FileList from '@/components/common/FileList.vue';

  // 获取外部传入的数据
  const props = defineProps({
    info: {
      type: Object,
      default: () => ({}),
    },
    docList: {
      type: Array,
      default: () => [],
    },
  });

  const list = ref<any[]>([]);
  // const info = ref<any>(props.info);

  // const columns = [];

  const [registerTable, { setTableData }] = useTable({
    canResize: true,
    columns: [
      {
        title: '费用项',
        dataIndex: 'title',
      },
      {
        title: '预估报价（元）',
        dataIndex: 'predictionFees',
      },
      {
        title: '实际费用（元）',
        dataIndex: 'actualFees',
      },
      {
        title: '费用附件',
        dataIndex: 'feesAttach',
      },
    ],
    striped: true,
    bordered: true,
    pagination: false,
    showSummary: true,
    maxHeight: 440,
    summaryFunc: handleSummary,
  });

  onMounted(() => {
    // getByGroupCode('tps_file_label').then((res) => {
    //   initFeesList(res);
    // });
    // initFeesList();
  });

  watch(
    () => props.docList,
    () => {
      initFeesList();
    },
  );

  function initFeesList() {
    let feesList: any = [
      {
        title: '提货费',
        label: 'approval_tihuo',
      },
      {
        title: '运输费',
        label: 'approval_yunshu',
      },
      {
        title: '送货费',
        label: 'approval_songhuo',
      },
      {
        title: '等时费',
        label: 'approval_dengshi',
      },
      {
        title: '放空费',
        label: 'approval_fangkong',
      },
      {
        title: '卸货费',
        label: 'approval_xiehuo',
      },
      {
        title: '保险费',
        label: 'approval_baoxian',
      },
      {
        title: '压夜费',
        label: 'approval_yaye',
      },
      {
        title: '其他',
        label: 'approval_qita',
      },
    ];

    console.log('feesList-111', feesList);
    // 初始化数据
    feesList.forEach((item, index) => {
      // console.log('forEach-222', item);
      let feesType = item.label.split('_')[1];
      // console.log('feesType-333', feesType);
      feesType = feesType === 'baoxian' ? 'gaosu' : feesType;
      feesList[index].predictionFees = index < 3 ? props.info[feesType] || 0 : 0;
      feesList[index].actualFees = props.info[feesType] || 0;
      feesList[index].fileList = [];
    });
    const labelArr = feesList.map((item) => item.label);
    props.docList.forEach((item: any) => {
      const index = labelArr.indexOf(item.label);
      // 把文件列表添加到对应费用项
      if (index > -1) {
        feesList[index].fileList.push(item);
      }
      // feesList.push({
      //   ...item,
      //   title: FileLabelEnum[item.label] || item.label,
      // });
    });

    console.log('feesList-222', feesList);
    list.value = feesList;
    setTableData(feesList);
  }

  // 表格合计方法
  function handleSummary(tableData) {
    let totalPredictionFees = 0;
    let totalActualFees = 0;
    tableData.forEach((item) => {
      totalPredictionFees += item.predictionFees;
      totalActualFees += item.actualFees;
    });
    return [
      {
        title: '总计',
        predictionFees: totalPredictionFees,
        actualFees: totalActualFees,
        feesAttach: `偏差：${props.info.deviation}  吨单价：${props.info.tonPrice || ''}元`,
      },
    ];
  }
  console.log('info', props);
</script>

<style scoped></style>
